2025年9月6日中文

学习如何使用 Hooks 实现 React 错误边界，从而优雅地处理资源加载错误，提升用户体验和应用稳定性。

在 React 中实现稳健的资源加载：通过 Hooks 掌握错误边界

在现代 Web 应用中，异步加载资源是一种常见的做法。无论是从 API 获取数据、加载图片，还是导入模块，处理资源加载过程中潜在的错误对于保障流畅的用户体验至关重要。React 错误边界（Error Boundaries）提供了一种机制，可以捕获其子组件树中任何位置的 JavaScript 错误，记录这些错误，并显示一个备用 UI，而不是让整个应用崩溃。本文将探讨如何有效地结合使用错误边界和 React Hooks 来管理资源加载错误。

理解错误边界

在 React 16 之前，组件渲染过程中未处理的 JavaScript 错误会破坏 React 的内部状态，并在后续渲染中引发难以理解的错误。错误边界通过充当其子组件中发生错误的“全捕获”块来解决此问题。它们是实现了以下一个或两个生命周期方法的 React 组件：

static getDerivedStateFromError(error): 这个静态方法在后代组件抛出错误后被调用。它接收被抛出的错误作为参数，并应返回一个值来更新组件的状态。
componentDidCatch(error, info): 这个生命周期方法在后代组件抛出错误后被调用。它接收被抛出的错误作为参数，以及一个包含有关哪个组件抛出错误的信息的对象。你可以用它来记录错误信息。

重要的是，错误边界只捕获其下方整个组件树在渲染期间、生命周期方法中和构造函数中的错误。它们不会捕获以下场景的错误：

事件处理程序（在下文的章节中有更多介绍）
异步代码（例如 setTimeout 或 requestAnimationFrame 回调）
服务器端渲染
错误边界自身抛出的错误（而不是其子组件）

错误边界与 React Hooks：强强联合

虽然传统上使用类组件来实现错误边界，但 React Hooks 提供了一种更简洁、更函数式的方法。我们可以创建一个可复用的 useErrorBoundary Hook，它封装了错误处理逻辑，并提供了一种便捷的方式来包装那些可能在资源加载期间抛出错误的组件。

创建一个自定义的 `useErrorBoundary` Hook

下面是一个 useErrorBoundary Hook 的示例：

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : An error occurred: {error.message || String(error)};
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

解释：

useState: 我们使用 useState 来管理错误状态。它最初将错误设置为 null。
useCallback: 我们使用 useCallback 来记忆化 resetError 和 captureError 函数。如果这些函数作为 props 向下传递，这是一个很好的实践，可以防止不必要的重新渲染。
ErrorBoundary 组件: 这是一个用 useCallback 创建的函数式组件，它接收 children 和一个可选的 fallback prop。如果状态中存在错误，它会渲染提供的 fallback 组件或一个默认的错误消息。否则，它会渲染 children。这充当了我们的错误边界。依赖数组 `[error]` 确保了当 `error` 状态改变时它会重新渲染。
captureError 函数: 这个函数用于设置错误状态。你将在加载资源时的 try...catch 块中调用它。
resetError 函数: 这个函数清除错误状态，允许组件重新渲染其 children（可能会重新尝试加载资源）。

通过错误处理实现资源加载

现在，让我们看看如何使用这个 Hook 来处理资源加载错误。考虑一个从 API 获取用户数据的组件：

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data.

}>
        An error occurred. This won't be shown because of fallback.
      
    );
  }

  if (!user) {
    return Loading user data...;
  }

  return (
    
      {user.name}
      Email: {user.email}
      {/* Other user details */}
    
  );
}

export default UserProfile;

解释：

我们导入 useErrorBoundary Hook。
我们调用该 Hook 来获取 ErrorBoundary 组件、captureError 函数、error 状态和 resetError 函数。
在 useEffect Hook 内部，我们将 API 调用包装在一个 try...catch 块中。
如果在 API 调用期间发生错误，我们调用 captureError(e) 来设置错误状态。
如果 error 状态被设置，我们渲染 ErrorBoundary 组件。我们提供了一个自定义的 fallback prop，它显示一条错误消息和一个“重试”按钮。点击按钮会调用 resetError 来清除错误状态，从而触发重新渲染并再次尝试获取数据。
如果没有发生错误并且用户数据已加载，我们渲染用户个人资料的详细信息。

处理不同类型的资源加载错误

不同类型的资源加载错误可能需要不同的处理策略。以下是一些常见场景及其应对方法：

网络错误

当客户端无法连接到服务器时（例如，由于网络中断或服务器停机），就会发生网络错误。上面的例子已经使用 `response.ok` 处理了基本的网络错误。你可能想添加更复杂的错误检测，例如：

            //Inside the fetchData function
try {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    // Consider adding specific error code handling
    if (response.status === 404) {
      throw new Error("User not found");
    } else if (response.status >= 500) {
      throw new Error("Server error. Please try again later.");
    } else {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
  }
  const data = await response.json();
  setUser(data);
} catch (error) {
  if (error.message === 'Failed to fetch') {
    // Likely a network error
    captureError(new Error('Network error. Please check your internet connection.'));
  } else {
    captureError(error);
  }
}

在这种情况下，你可以向用户显示一条消息，指出存在网络连接问题，并建议他们检查互联网连接。

API 错误

当服务器返回错误响应时（例如，400 Bad Request 或 500 Internal Server Error），就会发生 API 错误。如上所示，你可以检查 `response.status` 并适当地处理这些错误。

数据解析错误

当服务器的响应不是预期格式且无法解析时（例如，无效的 JSON），就会发生数据解析错误。你可以通过将 response.json() 调用包装在一个 try...catch 块中来处理这些错误：

            //Inside the fetchData function
try {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  const data = await response.json();
  setUser(data);
} catch (error) {
  if (error instanceof SyntaxError) {
    captureError(new Error('Failed to parse data from server.'));
  } else {
    captureError(error);
  }
}

图片加载错误

对于图片加载，你可以使用 <img> 标签上的 onError 事件处理程序：

            function MyImage({ src, alt }) {
  const { ErrorBoundary, captureError } = useErrorBoundary();
  const [imageLoaded, setImageLoaded] = useState(false);

  const handleImageLoad = () => {
    setImageLoaded(true);
  };

  const handleImageError = (e) => {
    captureError(new Error(`Failed to load image: ${src}`));
  };

  return (
    Failed to load image.

}>
      
      {!imageLoaded && Loading image...}
    
  );
}

在 React 中实现稳健的资源加载：通过 Hooks 掌握错误边界

理解错误边界

错误边界与 React Hooks：强强联合

创建一个自定义的 `useErrorBoundary` Hook

通过错误处理实现资源加载

{user.name}

处理不同类型的资源加载错误

网络错误

API 错误

数据解析错误

图片加载错误

使用错误边界的最佳实践

自定义 Hooks 的替代方案

全局错误处理

可访问性考量

结论

在 React 中实现稳健的资源加载：通过 Hooks 掌握错误边界

理解错误边界

错误边界与 React Hooks：强强联合

创建一个自定义的 useErrorBoundary Hook

通过错误处理实现资源加载

{user.name}

处理不同类型的资源加载错误

网络错误

API 错误

数据解析错误

图片加载错误

使用错误边界的最佳实践

自定义 Hooks 的替代方案

全局错误处理

可访问性考量

结论

创建一个自定义的 `useErrorBoundary` Hook